import React, { Component } from "react";

/*
  解决this指向问题
    1. 直接内联地使用 this.xxx.bind(this)
      不推荐的
      bind函数会产生一个新函数,并且新函数会存在于内存中,会导致内存占用太高
    2. 在constructor构造器里面使用 this.xxx = this.xxx.bind(this);
      比较推荐，官网在用
      将bind产生的新函数存下来了，不会造成内存增加的问题
    3. 使用箭头函数
      推荐
      箭头函数的this指向父级, 既方便又不会增加内存
*/

class App extends Component {
  constructor() {
    super();
    this.state = {
      count: 3,
    };
    // this.handleClick = this.handleClick.bind(this);
  }

  // handleClick() {
  //   // 默认情况下，可以直接拿到event参数
  //   // console.log(123, e);
  //   // 默认情况下，this指向的是undefined
  //   console.log(this.state.count);
  // }

  handleClick = () => {
    console.log(this.state.count);
  };

  render() {
    return (
      <>
        <h2>事件以及this指向</h2>
        {/* 合成事件 */}
        {/* 事件名称要写成小驼峰 */}
        {/* 事件后面不要加括号，函数会自执行 */}
        {/* <button onClick={this.handleClick.bind(this)}>btn</button> */}
        <button onClick={this.handleClick}>btn</button>
      </>
    );
  }
}

export default App;
